<template>
  <div class="attachment">
    <span class="title">选手报告单</span>
    <span class="close" @click="cancelFn">×</span>
    <div class="Popup">
      <div class="package_box">
        <div class="contentBox">
          <div class="big_box_g">
            <div
              class="form_g"
              v-for="(item, index) in HomeContent.Default.workOrderSheet.value"
              :key="index"
            >
              <div class="title_g BdBt">
                {{ index + 1 }}.{{ item.Project }}(满分8.5分)
              </div>
              <div class="box_title_g BdBt">
                <div class="Box1_g BdRt">序号</div>
                <div class="Box2_g BdRt">作业类型+作业对象+作业内容</div>
                <div class="Box3_g BdRt">数据或异常情况记录</div>
                <div class="Box4_g">维修措施</div>
              </div>
              <div
                class="form_content"
                v-for="(item1, index1) in item.WorkContents"
                :key="index1"
              >
                <div class="context_box1 BdRt BdBt">
                  <span class="parameter_g">{{ item1.Serial }}</span>
                </div>
                <div class="context_box2 BdRt BdBt">
                  <span class="parameter_g">{{ item1.WorkType }}</span>
                </div>
                <div class="context_box3">
                  <div
                    class="small_box BdBt"
                    v-for="(item2, index2) in item1.WorkContents"
                    :key="index2"
                  >
                    <!-- 压力值 -->
                    <div class="small_box1 BdRt">
                      <span class="parameter_g">{{ item2.WorkContent }}</span>
                    </div>
                    <div class="small_box2 BdRt">
                      <div
                        v-for="(item3, index3) in item2.DataList"
                        :key="index3"
                        style="display: flex"
                      >
                        <div class="spacing">
                          <div v-if="item3.Type == '0'">{{ item3.Item }}</div>
                          <div v-if="item3.Type == '1'">{{ item3.Item }}</div>
                          <input
                            @change="changeText(item3)"
                            class="ipt"
                            v-if="item3.Type == '1'"
                            v-model="item3.WorkValue"
                            placeholder="请输入..."
                          />
                          <span v-if="item3.Type == '1'">{{ item3.Unit }}</span>
                        </div>
                        <el-radio-group
                          v-model="item3.WorkValue"
                          @change="changeCheck(item3)"
                          class="gap"
                        >
                          <el-radio
                            v-for="(item4, index4) in item3.Item.split(',')"
                            :key="index4"
                            :label="item4"
                            class="checkbox"
                            v-if="item3.Type == '2'"
                            >{{ item4 }}</el-radio
                          >
                        </el-radio-group>
                        <!-- =========================================== -->
                        <!-- <div
                          v-for="(item4, index4) in item3.Item.split(',')"
                          :key="index4"
                          v-if="item3.Type == '2'"
                          @click=""
                        >
                          <img
                            src="/images/checkbox(1).png"
                            v-if="item3.WorkValue == item4"
                          />
                          <img src="/images/checkbox(2).png" v-else />
                          {{ item4 }}
                        </div> -->
                        <!-- =========================================== -->
                      </div>
                    </div>
                    <div class="small_box3">
                      <span></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <button class="confirm" @click="confirmFn">确定</button>
    <button class="cancel" @click="cancelFn">取消</button> -->
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import HomeContent from "../HomeContent";
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";
import MessageCode from "../MessageCode";

const transmit = ref({
  Id: 0,
  Value: "",
});
async function changeText(ev: any) {
  console.log("1111111111", ev);
  (transmit.value.Id = ev.Id), (transmit.value.Value = ev.WorkValue);
  await WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_ORDER_UPDATE_BASE_CONFIG,
      JSON.stringify(transmit.value)
    )
  );
}
async function changeCheck(value: any) {
  console.log("22222", value);
  (transmit.value.Id = value.Id), (transmit.value.Value = value.WorkValue);
  await WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_ORDER_UPDATE_BASE_CONFIG,
      JSON.stringify(transmit.value)
    )
  );
}
// HomeContent.Default.workOrderSheet.value.forEach((item: any) => {
//   item.WorkContents.forEach((item1: any) => {
//     item1.WorkContents.forEach((item2: any) => {
//       item2.DataList.forEach((item3: any) => {
//         if (item3.Type == 2 && item3.WorkValue !== null) {
//           parseInt(item3.WorkValue);
//           console.log("item3.WorkValue: ", parseInt(item3.WorkValue));
//         }
//       });
//     });
//   });
// });
function confirmFn() {
  // 关闭工单
  HomeContent.Default.ModuleShow.value = false;
}
function cancelFn() {
  // 取消数据
  // 关闭工单
  HomeContent.Default.ModuleShow.value = false;
}
onMounted(async () => {});
</script>

<style scoped>
.attachment {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #000;
  padding: 90px 10px 47px 20px;
  border-radius: 10px;
  width: 1360px;
  height: 900px;
}
.title {
  font-size: 30px;
  font-weight: 600;
  position: absolute;
  top: 30px;
  left: 30px;
}
.close {
  font-size: 46px;
  color: #000;
  position: absolute;
  right: 25px;
  top: 11px;
}
.confirm {
  border: 2px solid #e8ecf4;
  position: absolute;
  bottom: 25px;
  left: 40%;
  border-radius: 5px;
  width: 120px;
  height: 50px;
  font-size: 16px;
}
.confirm:hover {
  background: #9bfb4e;
}
.cancel {
  border: 2px solid #e8ecf4;
  position: absolute;
  bottom: 25px;
  right: 40%;
  border-radius: 5px;
  width: 120px;
  height: 50px;
  font-size: 16px;
}
.cancel:hover {
  background: #9bfb4e;
}
.Popup {
  width: 1330px;
  height: 770px;
  border-radius: 16px 16px 16px 16px;
  background: #fff;
}
.contentBox {
  border: 2px solid #e8ecf4;
  width: 100%;
  border-radius: 10px 10px 0 0;
}
.package_box {
  overflow-y: auto;
  width: 1330px;
  height: 770px;
  color: #000;
  padding-right: 10px;
}

.package_box::-webkit-scrollbar {
  width: 6px;
  height: 1px;
}

.package_box::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #dfe1e8;
}

.package_box::-webkit-scrollbar-track {
  border-radius: 10px;
}
.big_box_g {
  min-height: 800px;
  border-radius: 8px;
}

.form_g {
  min-height: 10px;
}

.title_g {
  width: 100%;
  height: 50px;
  font-size: 20px;
  font-weight: 600;
  line-height: 50px;
  padding-left: 20px;
  background: #f7f7f8;
}

.box_title_g {
  display: flex;
  font-size: 15.5px;
  font-weight: 600;
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: #000;
}

.BdBt {
  border-bottom: 1px solid #e8ecf4;
}

.BdRt {
  border-right: 1px solid #e8ecf4;
}

.Box1_g {
  width: 8%;
  position: relative;
}

.Box2_g {
  width: 44%;
  position: relative;
}

.Box3_g {
  width: 40%;
}

.Box4_g {
  width: 8%;
  position: relative;
}

.form_content {
  width: 100%;
  font-size: 16px;
  display: flex;
}
.parameter_g {
  width: fit-content;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: black;
}
.context_box1 {
  width: 8%;
  text-align: center;
  position: relative;
}

.context_box2 {
  width: 8%;
  text-align: center;
  position: relative;
}

.context_box3 {
  width: 84%;
}

.small_box {
  display: flex;
}

.small_box1 {
  width: 42.9%;
  position: relative;
}

.small_box2 {
  width: 47.6%;
  padding-left: 15px;
}

.small_box3 {
  width: 9.5%;
}

.ipt {
  width: 110px;
  height: 25px;
  line-height: 25px;
  border: none;
  margin: 1px 0;
  margin-right: 10px;
}

.ipt:focus {
  outline: 1px solid #dcdfe6;
}
.elipt {
  border: none;
}

.elipt:focus {
  outline: 1px solid #dcdfe6;
}

.checkbox {
  color: #000000;
}

:deep .el-radio__inner {
  border-radius: 2px;
}

:deep(.el-radio__input.is-checked) .el-radio__inner::after {
  content: "";
  width: 10px;
  height: 5px;
  border: 1px solid black;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: inline-block;
  position: absolute;
  top: 2px;
  left: 1px;
  vertical-align: middle;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}
:deep(.el-radio__input.is-checked) .el-radio__inner {
  border-color: #9bfb4e;
  background: #9bfb4e;
}
:deep .el-radio__input.is-checked + .el-radio__label {
  color: black !important;
}
:deep .el-radio__inner:hover {
  border-color: #9bfb4e !important;
}
:deep .el-radio__label {
  font-size: 16px;
}
.spacing {
  display: flex;
  margin-top: 12px;
}
.gap {
  display: flex;
  margin-top: 8px;
  margin-bottom: 8px;
}
</style>
